<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="/js/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="/css/index.css">
  <!-- 引入组件库 -->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>

</head>
<body>

<div id="app">
  <div style="width: 400px; margin: 100px auto">
    <div style="font-size: 30px; text-align: center; padding: 30px 0; ">欢迎注册</div>
    <el-form :model="form" :rules="rules" ref="form" width="100px" class="demo-ruleForm">
      <el-form-item prop="patientName">
        <el-input placeholder="请输入姓名" prefix-icon="el-icon-s-custom"
                  v-model="form.patientName"></el-input>
      </el-form-item>

      <el-form-item prop="sex">
        <el-input placeholder="请输入性别" prefix-icon="el-icon-lock" v-model="form.sex"></el-input>
      </el-form-item>

      <el-form-item prop="phone">
        <el-input placeholder="请输入手机号" prefix-icon="el-icon-lock" v-model="form.phone"></el-input>
      </el-form-item>

      <el-form-item prop="idNumber">
        <el-input placeholder="请输入身份证号" prefix-icon="el-icon-lock" v-model="form.idNumber"></el-input>
      </el-form-item>

      <el-form-item prop="userName">
        <el-input placeholder="请输入账号" prefix-icon="el-icon-lock" v-model="form.userName"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input placeholder="请输入密码" type="password" prefix-icon="el-icon-lock" v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button style="width: 100%" type="success" @click="zc">注 册</el-button>
      </el-form-item>

      <el-form-item>
        <el-button style="width: 100%" type="success" @click="qdl">去登录</el-button>
      </el-form-item>
    </el-form>
  </div>

</div>


<script>
  const app = new Vue({
    el: "#app",
    data() {
      return {
        form: {
          patientName:'',
          sex:'',
          phone:'',
          idNumber:'',
          username: '',
          password: '',
        },
        rules: {
          patientName: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
          sex: [{required: true, message: '性别不能为空', trigger: 'blur'}],
          phone: [{required: true, message: '手机号不能为空', trigger: 'blur'}],
          idNumber: [{required: true, message: '身份证号不能为空', trigger: 'blur'}],
          username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
        },
        validCode:''

      }
    },
    methods: {
      /**
       * 注册方法
       */
      zc(){
        //定义url
        var url = "/patient/add";
        //定义一个变量，赋值为当前vue对象
        var _this = this;
        //使用axios向后台发请求，获取数据
        axios.put(//请求方式，必须和后端资源暴露方式一致
                url,//请求的url
                this.form)//请求携带的参数
                .then(function (response) {//成功响应的处理方法   response 是响应的数据
                  console.log(response);
                  //response 一定是json对象  stringify 把json对象转json字符串
                  //判断返回是否正确
                  if(response.data.code===200){
                    //提示信息
                    _this.$message({
                      message: '注册成功请登录',
                      type: 'success'
                    });
                    //关闭对话框
                    _this.dialogFormVisible = false;
                    //重新加载数据
                    _this.loadData();
                  }else if (response.data.code===500){
                    _this.$message.error('用户名已被使用');
                  } else{
                    _this.$message.error('注册失败请仔细检查个人信息');
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });
      },

      qdl(){
        location.href = "/html/userlogin.html";
      }
    }
  })

</script>
</body>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  .el-input {
    margin-bottom: 20px;
  }
  a {
    text-decoration: none;
    color: #a0cfff;

  }

  body {
    background: url("/img/dlbj.jpg") no-repeat;
    background-size: 100% 150%;
  }


</style>
</html>

